<template>
  <div class="addresshome">
    <ContentBox title="收货地址" @left="back" :fixed="true" @right="right" :ostyle="style">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
      <template slot="oright"><van-icon color="#000000"/>新增地址</template>
    </ContentBox>
    <notice :top="$remToPx('0.88')"></notice>
    <div class="myaddresscontent">
      <div class="address" v-for="(item, index) in addressList" :key="index" @click.stop="backCart(item.id)">
        <div class="main">
          <h3 class="title">
            <span>{{item.real_name}}</span><i>{{item.phone}}</i>
          </h3>
        </div>
        <p class="address_detail">{{item.province}} {{item.city}} {{item.district}} {{item.detail}}</p>
        <van-divider />
        <div class="editAddress">
          <van-checkbox :icon-size="$remToPx(0.32)" :max="1" v-model="checked[index]" class="default" @click="setDefault(item.id, index)">设为默认</van-checkbox>
          <span @click="edit(index)">编辑</span>
          <span @click.stop="deleteAddress(item.id)">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        background: '#ffffff',
        color: '#000'
      },
      addressList: [],
      checked: []
    }
  },
  methods: {
    back () {
      if (this.$route.query.id && this.$route.query.orderKey) {
        this.$router.replace({ name: 'CreateOrder', query: { id: this.$route.query.id, orderKey: this.$route.query.orderKey } })
      } else {
        if (this.$store.state.pl === 'H5') {
          this.$router.push('/center')
        } else if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.switchTabBar(3)
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('switchTabBar', 3)
        }
      }
    },
    right () {
      if (this.$route.query.id && this.$route.query.orderKey) {
        this.$router.push({ name: 'addAddress', query: { id: this.$route.query.id, orderKey: this.$route.query.orderKey } })
      } else {
        this.$router.push('/addAddress')
      }
    },
    getMyAddressList () {
      this.$axios.get('/api/address/list', {
        params: {
          _: Math.random() * Math.random()
        }
      }).then(res => {
        if (res.status === 200) {
          this.addressList = res.data
          this.checked = []
          for (let x in res.data) {
            if (res.data[x].is_default) {
              this.checked.push(1)
            } else {
              this.checked.push(0)
            }
          }
        }
      })
    },
    setDefault (id, index) {
      this.$axios.post('/api/address/default/set', {
        id: id
      }).then(res => {
        if (res.status === 200) {
          this.$dialog({ message: '设置成功' })
          this.getMyAddressList()
        } else {
          this.$dialog({ message: res.msg })
          this.checked[index] = 0
        }
      })
    },
    deleteAddress (id, index) {
      this.$dialog.confirm({
        title: '提示',
        message: '是否删除该地址'
      }).then(() => {
        this.$axios.post('/api/address/del', {
          id: id
        }).then(res => {
          if (res.status === 200) {
            this.$dialog({ message: '删除成功' })
            this.getMyAddressList()
          } else {
            this.$dialog({ message: res.msg })
          }
        })
      }).catch(() => {
        // on cancel
      })
    },
    edit (index) {
      this.$router.push(`/addAddress?index=${index}`)
    },
    backCart (id) {
      if (this.$route.query.id && this.$route.query.orderKey) {
        this.$router.replace({ name: 'CreateOrder', query: { id: this.$route.query.id, orderKey: this.$route.query.orderKey, addressid: id } })
      }
    }
  },
  created () {
    this.getMyAddressList()
  }
}
</script>

<style lang="scss">
@import './style.scss';
</style>
